import React, { Component } from 'react';
import moment from 'moment';

import { Form, Input, Button, Checkbox, Row, Col,
    Tooltip,
    Upload, Cascader, Select, Radio, DatePicker, Tabs, TimePicker, Table, Modal } from 'antd';
import { LoadingOutlined, PlusOutlined, CloseCircleOutlined, SearchOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
const { Option } = Select;
const { RangePicker } = DatePicker;
const { TabPane } = Tabs;
const { Column } = Table;
const { Search } = Input;
const { confirm } = Modal;


import axios from '@src/lib/axios';
import PageTitle from "@src/components/PageTitle";

import '@src/style/product.scss';


export default class OrderList extends Component {
    //static contextType = ApiContext;
    formRef = React.createRef();
    state = {
        orderList: [],
        total: 0,
        params: {
            page: 1,
            limit: 15,
            order_by: '', // 现在支持'hotel_order_id', 'in_date', 'created_at' 三种排序方式
            sort: '' // asc desc
        }
    };

    onFinish = (value) => {
        console.log(value)
    };
    onFinishFailed = (value) => {
        console.log(value)
    };

    onChangeHandler = (k, v) => {
        this.setState({ [k]: v });
    };

    onChangePage = (page) => {
        this.state.params.page = page;
        this.fetchData();
    };

    confirmHandler = (row) => {
        axios.post('/product/hotel/order_confirm', {
            hotel_order_id: row.hotel_order_id
        } ).then(res => {
            if (res.code === 0) {
                this.fetchData();
                message.error('操作成功！');
            } else {
                message.error(res.msg);
            }
        })
    };

    applyPrePay = (row) => {
        confirm({
            title: '提示',
            icon: <ExclamationCircleOutlined />,
            content: '确认申请预付吗？',
            onOk() {
                axios.post('/product/hotel/applyPrePayRequire', {
                    hotel_order_id: row.hotel_order_id
                } ).then(res => {
                    if (res.code === 0) {
                        this.fetchData();
                        message.error('操作成功！');
                    } else {
                        message.error(res.msg);
                    }
                })
            },
            onCancel() {},
        });
    };

    cancel = (row) => {
        confirm({
            title: '提示',
            icon: <ExclamationCircleOutlined />,
            content: '确认执行拒绝操作吗？',
            onOk() {
                axios.post('/product/hotel/order_refuse', {
                    hotel_order_id: row.hotel_order_id
                } ).then(res => {
                    if (res.code === 0) {
                        this.fetchData();
                        message.error('操作成功！');
                    } else {
                        message.error(res.msg);
                    }
                })
            },
            onCancel() {},
        });
    }
    fetchData = (opt) => {
        let params = this.state.params;
        if (opt) {
            let { inDate, preDate, ...rst } = this.formRef.current.getFieldsValue();
            params = {
                in_date_start: '',
                in_date_end: '',
                created_at_start: '',
                created_at_end: '',
                ...rst,
                ...params
            };
            if (inDate.length) {
                params.in_date_start = inDate[0].format('YYYY-MM-DD');
                params.in_date_end = inDate[1].format('YYYY-MM-DD');
            }
            if (preDate.length) {
                params.created_at_start = preDate[0].format('YYYY-MM-DD');
                params.created_at_end = preDate[1].format('YYYY-MM-DD');
            }
            console.log(params)
        }
        axios.post('/product/hotel/order_list', params ).then(res => {
            if (res.code === 0) {
                let { list, total } = res.data;
                this.setState({
                    orderList: list,
                    total
                });
            }
        })
    }

    UNSAFE_componentWillMount() {
        this.fetchData(false);
    }
    render() {
        let { orderList, total } = this.state;
        // const rowSelection = {
        //     onChange: (selectedRowKeys, selectedRows) => {
        //         console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        //     },
        //     getCheckboxProps: record => ({
        //         disabled: record.name === 'Disabled User', // Column configuration not to be checked
        //         name: record.name,
        //     }),
        // };

        const Opertion = ({ row }) => {
            console.log(row)
            if (row.status === 1) {//待支付
                return (
                    <div>
                        <Button type="link" onClick={() => this.cancel(row)}>取消订单</Button>
                    </div>
                )
            } else if (row.status === 2) {//已付款,待确认
                return (
                    <div>
                        <Button type="link" onClick={() => this.confirmHandler(row)}>确认</Button>
                        <Button type="link" onClick={() => this.cancel(row)}>取消订单</Button>
                    </div>
                )
            } else {
                return null;
            }
        }

        return (
            <div style={{padding: "0 15px 100px 15px", background: "#fff"}}>
                <PageTitle title="订单列表"/>
                <Row style={{padding: '20px 0'}}>
                    <Col span={24}>
                        <Form
                            ref={this.formRef}
                            labelCol={{ span: 6 }}
                            wrapperCol={{ span: 24 }}
                            name="basic"
                            initialValues={{
                                status: '',
                                contract_member: '',
                                contract_mobile: '',
                                dist_order_sn: '',
                                hotel_name: '',
                                hotel_order_sn: '',
                                inDate: [],
                                preDate: [],
                            }}
                            onFinish={this.onFinish}
                        >
                            <Row gutter={10}>
                                <Col span={5}>
                                    <Form.Item
                                        colon={false}
                                        label="订单号"
                                        name="hotel_order_sn"
                                    >
                                        <Input />
                                    </Form.Item>
                                </Col>
                                <Col span={10}>
                                    <Form.Item
                                        colon={false}
                                        label="入住日期"
                                        name="inDate"
                                    >
                                        <RangePicker onChange={this.fetchData} format="YYYY-MM-DD"/>
                                    </Form.Item>
                                </Col>
                                <Col span={6}>
                                    <Form.Item
                                        colon={false}
                                        label="下单日期"
                                        name="preDate"
                                    >
                                        <RangePicker onChange={this.fetchData} format="YYYY-MM-DD"/>
                                    </Form.Item>
                                </Col>
                                <Col span={5}>
                                    <Form.Item
                                        colon={false}
                                        label="酒店名"
                                        name="hotel_name"
                                    >
                                        <Input />
                                    </Form.Item>
                                </Col>
                                <Col span={5}>
                                    <Form.Item
                                        colon={false}
                                        label="订单状态"
                                        name={"status"}
                                    >
                                        <Select onChange={this.fetchData}>
                                            <Option value={''}>全部</Option>
                                            <Option value={1}>待支付</Option>
                                            <Option value={2}>待确认</Option>
                                            <Option value={3}>待入住</Option>
                                            <Option value={4}>已关闭</Option>
                                            <Option value={5}>自动关闭</Option>
                                            <Option value={6}>已完成</Option>
                                        </Select>
                                    </Form.Item>
                                </Col>
                                <Col span={5}>
                                    <Form.Item
                                        colon={false}
                                        label="联系人"
                                        name="contract_member"
                                    >
                                        <Input />
                                    </Form.Item>
                                </Col>
                                <Col span={5}>
                                    <Form.Item
                                        colon={false}
                                        labelCol={{ span: 7 }}
                                        label="贵司单号"
                                        name="dist_order_sn"
                                    >
                                        <Input />
                                    </Form.Item>
                                </Col>
                                <Col span={5}>
                                    <Form.Item
                                        colon={false}
                                        label="手机号"
                                        name="contract_mobile"
                                    >
                                        <Input />
                                    </Form.Item>
                                </Col>
                                <Col span={3}>
                                    <Button type="primary" icon={<SearchOutlined />} onClick={this.fetchData}>搜索</Button>
                                </Col>
                            </Row>
                        </Form>
                    </Col>
                </Row>

                <Table
                    // rowSelection={{
                    //     type: 'checkbox',
                    //     ...rowSelection
                    // }}
                    rowKey="oid"
                    dataSource={orderList}
                    pagination={{
                        total,
                        current: this.state.params.page,
                        pageSize: this.state.params.limit,
                        onChange: this.onChangePage
                    }}
                >
                    <Column
                        title="订单编号"
                        dataIndex="sn"
                        key="sn"
                    />
                    <Column
                        title="下单会员"
                        dataIndex="operation_user"
                        key="operation_user"
                        width={100}
                    />
                    <Column
                        title="酒店名称"
                        dataIndex="hotel_name"
                        key="hotel_name"
                        width={200}
                        ellipsis={{showTitle:false}}
                        render={(hotel_name)=>{
                            return (
                            <Tooltip placement="topLeft" title={hotel_name}>
                            {hotel_name}
                            </Tooltip>
                            )
                }}
                    />
                    <Column
                        title="总金额"
                        dataIndex="price"
                        key="price"
                        render={(val) => <span>{ (val?val:'0') + `${process.env.CURRENCY}`}</span>}
                    />
                    <Column
                        title={"实付金额"}
                        dataIndex={'real_price'}
                        key={'real_price'}
                        render={(val) => <span>{val?val:'0' + `${process.env.CURRENCY}`}</span>}
                    />
                    <Column
                        title="下单时间"
                        dataIndex="created_at"
                        key="created_at"
                    />
                    <Column
                        title="状态"
                        dataIndex="status_text"
                        key="status"
                        width={80}
                    />
                    <Column
                        title="操作"
                        align={"center"}
                        dataIndex="status"
                        key="status"
                        render={(val, row) => (
                            <Opertion row={row}/>
                        )}
                    />
                </Table>
            </div>
        )
    }
}